<template>
  <div>
    <div class="fixheader">
      <!-- 头部 -->
      <eleheader title="甜品饮品">
        <!-- 插槽左 -->
        <span slot="left" class="header_left">
          <!-- 图标 -->
          <van-icon name="arrow-left" @click.native="$router.back()" />
        </span>
        <!-- 插槽右 -->
        <span slot="right" class="header_right"> </span>
      </eleheader>
      <!-- 下拉菜单 -->

      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item title="分类" ref="item1">
          <!-- 分类选择    -->

          <typeListTag
            :items="items"
            :sub_categories="sub_categories"
            @selectFn="selectFn"
          ></typeListTag>
        </van-dropdown-item>
        <!-- 排序 -->
        <van-dropdown-item
          title="排序"
          :options="option1"
          @change="orderFn"
          v-model="value"
        />
        <!-- 筛选 -->
        <van-dropdown-item title="筛选" ref="item2">
          <div>
            <div style="margin: 10px">配送方式</div>
            <div style="margin: 10px">
              <div
                v-for="(item, index) in deliveryList"
                :key="item.id"
                @click="sendFn(index)"
              >
                <span class="sendbtn" :class="{ active: item.is_solid }">
                  <span :class="{ icon: true }" v-if="!item.is_solid">
                    送
                  </span>
                  <van-icon name="success" color="#1989fa" v-else />

                  {{ item.text }}
                </span>
              </div>
            </div>
          </div>
          <div style="margin: 10px">商家属性(可以多选)</div>
          <ul style="margin: 10px" class="restaurantattr">
            <li
              v-for="(value, index) in activity_attributes"
              :key="value.id"
              :icon="value.icon_name"
              @click="support_ids(value, index)"
              :class="{ active: value.bool }"
            >
              <span :class="{ icon: true }" v-if="!value.bool">
                {{ value.icon_name }}
              </span>
              <van-icon name="success" color="#1989fa" v-else />

              {{ value.name }}
            </li>
          </ul>
          <div style="padding: 5px 16px">
            <van-button type="default" @click="clearAllFn">清空</van-button>
            <van-button type="primary" @click="onConfirm"> 确认 </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="listcontent">
      <restaurantList
        v-for="obj in restaurantsList"
        :key="obj.id"
        :obj="obj"
        @click.native="topage(obj)"
      ></restaurantList>
    </div>
  </div>
</template>

<script>
import typeListTag from "@/components/typeListTag.vue";
import restaurantList from "@/components/restaurantList.vue";
import eleheader from "@/components/eleheader";
import {
  category,
  activity_attributes,
  delivery_modes,
  restaurants,
} from "@/api/goodTypeList.js";
export default {
  components: {
    eleheader,
    restaurantList,
    typeListTag,
  },
  data() {
    return {
      active: 0, //默认选中
      value: 0,
      items: [
        {
          text: "分组 1",
        },
        {
          text: "分组 2",
        },
      ], //分类选择数据
      option1: [
        { text: "智能排序", value: 4, icon: "search" },
        { text: "距离最近", value: 5, icon: "search" },
        { text: "销量最高", value: 6, icon: "search" },
        { text: "起送价最低", value: 1, icon: "search" },
        { text: "配送速度最快", value: 2, icon: "search" },
        { text: "评分最高", value: 3, icon: "search" },
      ],
      option: [
        //下拉菜单数据
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      getData: {
        //发送请求数据的变量
        longitude: "31.22967", //从其他页面拿到经纬度
        latitude: "121.4762",
        support_ids: [], //商家属性
        delivery_mode: [1], //配送方式
        limit: 20, //请求数据的数量
        offset: 0, //跳过的数据

        order_by: 4, //排序方式
        restaurant_category_ids: [230],
      },
      categoryList: [], //所有类型数据
      sub_categories: [], //保存子菜单数据
      deliveryList: [], // 配送方式数据
      activity_attributes: [], //商家属性数据
      restaurantsList: [], //商家列表数据
    };
  },
  methods: {
    // 点击店铺跳转页面
    topage(obj) {
      // console.log(1);
      this.$router.push({
        path: "/goodsmenu",
        query: {
          obj: JSON.stringify(obj),
        },
      });
    },
    // 配送方式选择切换事件
    sendFn(index) {
      this.deliveryList[index].is_solid = !this.deliveryList[index].is_solid;
      this.deliveryList.splice();
      let arr = this.deliveryList.filter((item) => {
        return item.is_solid;
      });
      // console.log(172, arr);
      this.getData.delivery_mode = arr.map((item) => {
        return item.id;
      });
      // console.log(161, this.getData.delivery_mode);
    },

    // 点击商家属性属性按钮
    support_ids(item, index) {
      // console.log(item);
      this.activity_attributes[index].bool =
        !this.activity_attributes[index].bool;
      this.activity_attributes.splice();
      let arr = this.activity_attributes.filter((item) => {
        return item.bool;
      });
      // console.log(172, arr);
      this.getData.support_ids = arr.map((item) => {
        return item.id;
      });
      // console.log(this.getData.support_ids);
    },
    // 筛选点击确认按钮
    onConfirm() {
      this.$refs.item2.toggle();
      this.getrestaurants();
    },

    // 筛选清除按钮
    clearAllFn() {
      // 清空筛选数据
      this.activity_attributes.forEach((item, index) => {
        this.activity_attributes[index].bool = false;
        this.activity_attributes.splice();
      });

      this.deliveryList.forEach((item, index) => {
        this.deliveryList[index].is_solid = false;
        this.deliveryList.splice();
      });
      // 清空请求筛选数据
      this.getData.support_ids = [];
      this.getData.delivery_mode = [];
    },

    // 排序方式
    orderFn(value) {
      // console.log(value);
      this.getData.order_by = value;
      this.getrestaurants();
    },
    // 点击小分类数据 拿到点击的商铺id发起请求
    selectFn(id) {
      console.log(id);
      this.getData.restaurant_category_ids = [id];
      this.getrestaurants();
      this.$refs.item1.toggle();
    },

    // 封装获取商家列表数据函数
    getrestaurants() {
      restaurants(this.getData).then((res) => {
        // console.log(138, res);
        this.restaurantsList = res.data;
      });
    },
  },
  created() {
    // 拿到首页传过来的id
    console.log(this.$route.query.id);
    if (this.$route.query.id) {
      this.getData.restaurant_category_ids = [parseInt(this.$route.query.id)];
      console.log(239);
    } else {
      this.getData.restaurant_category_ids = [230];
      console.log(242);
    }

    // 拿到分类数据
    category(this.getData).then((res) => {
      // console.log(res);
      this.categoryList = res.data;
      // 拿到所有的总类型
      this.categoryList.forEach((item, index) => {
        let img =
          "https://fuss10.elemecdn.com/" +
          item.image_url.slice(0, 1) +
          "/" +
          item.image_url.slice(1, 3) +
          "/" +
          item.image_url.slice(3, item.image_url.length) +
          ".png";
        // console.log(188, img);
        this.categoryList[index].image_url = img;
      });
      this.items = this.categoryList.map((item) => {
        return {
          name: item.name,
          icon: item.image_url,
          id: item.id,
          count: item.count,
        };
      });
      //   拿到所有的子类型
      this.sub_categories = this.categoryList.map((item) => {
        // console.log(item.sub_categories);

        return item.sub_categories;
      });
      // console.log(101, this.sub_categories);
    });
    // 拿到配送数据
    delivery_modes().then((res) => {
      // console.log(150, res);
      this.deliveryList = res.data;
    });
    // 拿到商家属性
    activity_attributes().then((res) => {
      // console.log(res);
      this.activity_attributes = res.data;
      this.activity_attributes.forEach((item, index) => {
        this.activity_attributes[index].bool = false;
        // console.log(item);
      });
    });
    this.getrestaurants();
  },
};
</script>
 
<style lang="less" scoped>
.restaurantattr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;

  li {
    width: 25%;
    height: 40px;
    line-height: 40px;
    margin: 10px;
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 5px;
    .icon {
      padding: 2px;
      text-align: center;
      border: 1px solid #1989fa;
      color: #1989fa;
      margin-right: 5px;
      border-radius: 2px;
    }
  }
  .active {
    color: #1989fa;
  }
}
.fixheader {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.listcontent {
  margin-top: 100px;
}
.van-button {
  width: 40%;
  margin: 20px 0 0 50px;
}

.sendbtn {
  display: inline-block;
  border: 1px solid #ccc;
  width: 200px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #000;
  .icon {
    padding: 2px;
    text-align: center;
    border: 1px solid #1989fa;
    color: #1989fa;
    margin-right: 5px;
    border-radius: 2px;
  }
}
.active {
  color: #1989fa;
}
.header_left,
.header_right {
  padding: 0 20px;
  flex: 1;
}
.header_left {
  .van-icon {
    float: left;
    line-height: 45px;
  }
}
.header_right {
  .van-icon {
    float: right;
    line-height: 45px;
  }
}
</style>